<template>
  <div>
    <div class="orderDetailtit clearfix">
      <div class="orderDetailtit_bg clearfix">
        <div class="info-item">
          <span class="j-status">{{detail.status_name}}</span>
        </div>
        <div class="info-item order_num">
          <p>
            <span>订单号：</span>
            <span class="j-order_no">{{detail.order_no}}</span>
          </p>
          <p>
            <span>时间：</span>
            <span class="j-create_time">{{detail.create_time}}</span>
          </p>
          <!-- <em></em> -->
        </div>
      </div>
    </div>
    <div class="orderDetail">
      <!-- 商品信息 -->
      <ul class="goods">
        <li v-for="(item, index) in detail.item" :key="index">
          <a @click="ItemDetail(item.item_id)" class="clearfix">
            <div class="goods-img fl">
              <img :src="item.is_compress?`${item.pic_url}80x80`:item.pic_url" :alt="item.title" />
            </div>
            <div class="goods-info">
              <p class="title">{{item.title}}</p>
              <div class="sku">
                <span v-if="item.sku_name">{{item.sku_name}}</span>
              </div>
              <div class="price_num clearfix">
                <span class="price fl">
                  <i v-html="MoneyIcon"></i>
                  <em class="number">{{getPriceInt(item.current_price)}}</em>
                  <i>{{getPriceDot(item.current_price)}}</i>
                </span>
                <span class="sku_num fr">&times;{{item.num}}</span>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 退款详情 -->
    <section class="tk_title">
      <span>协商详情</span>
    </section>
    <div class="tk_message">
      <section class="clearfix">
        <span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</span>
        <span>{{detail.type}}</span>
      </section>
      <section class="clearfix">
        <span>申请金额：</span>
        <span>{{mSymbol.name}}{{detail.apply_fee}}</span>
      </section>
      <section class="clearfix">
        <span>实际退款：</span>
        <span>{{mSymbol.name}}{{detail.total_fee}}</span>
      </section>
      <section class="clearfix">
        <span>退款原因：</span>
        <span>{{detail.reason}}</span>
      </section>

      <section class="clearfix">
        <span>退款编号：</span>
        <span>{{detail.complain_order_no}}</span>
      </section>
      <section class="clearfix">
        <span>申请时间：</span>
        <span>{{detail.create_time}}</span>
      </section>
    </div>

    <!-- 物流详情 -->
    <ul class="logistics" v-if="expressInfo.result.length>0">
      <li class="wu_tt">物流详情</li>
      <li class="wu_tt">
        <p class="courier" style="color:#ff9619;">
          <em class="name">{{expressInfo.express_name}}</em>
          <em class="number">运单号：{{expressInfo.order_no}}</em>
        </p>
      </li>

      <li class="wuliu" v-for="(item, index) in expressInfo.result" :key="index">
        <div class="wu_left">
          <div class="fff"></div>
          <div class="boll"></div>
        </div>
        <div class="wlt">
          <p>{{item.status}}</p>
          <p>{{item.time}}</p>
        </div>
      </li>
    </ul>
    <!-- 取消退换货 -->
    <section class="cancel_change_btn">
      <a
        v-if="detail.status == 0"
        @click="clickCancleTk(detail.complain_order_id)"
        class="mbtn btn-warning btn-big cancleTk"
        href="javascript:;"
      >取消{{detail.type}}</a>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant'
import { mapGetters } from 'vuex'

import {
  getComplainDetail,
  getExpressInfo,
  cancleComplain
} from '@/api/order/order.js'
export default Vue.extend({
  data() {
    return {
      detail: {
        status_name: '买家取消退/换货', // 订单状态
        status: '0',
        order_no: '1111111324254346', // 订单编号
        create_time: '0000-00-00 00:00:00', // 创建时间
        end_time: '0000-00-00 00:00:00',
        type: '退货',
        apply_fee: '222.00',
        total_fee: '222.00',
        reason: '其他理由22',
        complain_order_no: 't343544234',
        item: [
          {
            item_id: '123',
            is_compress: null,
            pic_url:
              'http://img.wifenxiao.com/16/79/6/2019-07/5d366ade67fea.jpg@!80x80',
            title: '黑嘉嘉1 ',
            sku_name: '绿色',
            current_price: '355',
            num: '1'
          }
        ]
      },
      expressInfo: {
        express_name: 'EMS',
        order_no: '24436',
        result: [
          {
            status: 'is额的加菲狗',
            time: '23433'
          },
          {
            status: 'is额的加菲狗',
            time: '23433'
          }
        ]
      }
    }
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const data = {
        id: this.$route.query.id,
        page: this.$route.query.page,
        label_type: this.$route.query.label_type
      }
      getComplainDetail(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.detail = res.data.detail
          if (res.data.isShowExpress == 1) this._getExpressInfo()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 获取运单信息
    _getExpressInfo() {
      const data = {
        id: this.detail.complain_order_id,
        type: 7
      }
      getExpressInfo(data).then(res => {
        if (res.status == 1) {
          this.expressInfo = res.data
        }
      })
    },
    // 取消换货、取消退货
    clickCancleTk(id) {
      Dialog.confirm({
        message: '确认取消？',
        className: 'common-confirm',
        closeOnClickOverlay: true
      })
        .then(() => {
          this.$loadingWrap.show()
          setTimeout(() => {
            this.$loadingWrap.close()
          }, 10000)
          cancleComplain({ id }).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.$Error('操作成功')
              // TODO 小程序使用init
                this.init()
            } else {
              this.$Error(res.msg)
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    getPriceInt(price) {
      if (price) {
        const idx = price.indexOf('.')
        return idx !== -1 ? price.substr(0, idx) : price
      } else {
        return '0'
      }
    },
    getPriceDot(price) {
      if (price) {
        const idx = price.indexOf('.')
        return idx !== -1 ? price.substr(idx) : '.00'
      } else {
        return '.00'
      }
    },
    ItemDetail(item_id) {
      this.$JumpName(this, 'item-detail', { detailId: item_id })
    }
  },
  computed: {
    MoneyIcon() {
      return this.detail.pay_type == 5 ? '&dollar;' : `${this.mSymbol.name}`
    },
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  },
  created() {
    this.init()
  }
})
</script>

<style lang="scss">
@import 'src/styles/variables.scss';
@import 'src/styles/mixin';

.orderDetailtit {
  background-color: $default;
  padding: 0 20px;
  font-size: 28px;
  color: $default;
  background: linear-gradient(left, #ff635c, #ff7d68);
  i {
    color: $default;
    padding: 6px 16px;
    display: inline-block;
    font-size: 24px;
    border-radius: 6px;
    line-height: 26px;
    @include gradient(right, #ff6530, #ff9461);
  }
  .orderDetailtit_bg {
    padding: 40px 0;
    background: url('https://img.wifenxiao.com/h5-wfx/images/order/order_detail_box.png') right
      center no-repeat;
    background-size: 164px 170px;
    .info-item {
      .j-status {
        font-size: 32px;
        line-height: 1;
      }
      p {
        font-size: 24px !important;
        text-align: left;
      }
      &.order_num {
        margin-top: 8px;
        p {
          font-size: 24px;
          line-height: 40px;
          color: $default;
        }
      }
    }
  }
}

.orderDetail {
  color: #333;
  font-size: 26px;
  text-align: center;
  background: $default;
  .goods {
    background: $default;
    padding: 20px 0;
    li {
      background: #fafafa;
      a {
        padding: 16px 20px 30px;
        display: block;
        color: #333;
        .goods-img {
          width: 160px;
          height: 160px;
          overflow: hidden;
          border-color: #f2f1f1;
          img {
            width: 100%;
            height: auto;
            border-radius: 6px;
          }
        }
        .goods-info {
          padding-left: 180px;
          position: relative;
          height: 160px;
          text-align: initial;
          .title {
            @include lineClamp();
            margin-bottom: 10px;
            line-height: 1.4em;
            // height: 2.8em;
            overflow: hidden;
            font-size: 26px;
          }
          .sku {
            color: #585858;
            position: relative;
            span {
              color: #999;
              font-size: 24px;
              display: inherit;
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .price_num {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding-left: 180px;
            box-sizing: border-box;
            .price {
              font-family: Gilroy-Regular;
              color: #ff5a00;
              font-size: 0;
              i {
                font-size: 26px;
              }
              .number {
                font-size: 32px;
              }
            }
            .sku_num {
              font-size: 28px;
            }
          }
          .cycle_buy_title {
            padding: 6px 12px;
            color: $default;
            border-radius: 6px;
            background: #ff4445;
            font-size: 22px;
            margin-top: 10px;
            display: inline-block;
            position: absolute;
            right: 0;
            bottom: 40px;
          }
        }
        .goods-extry {
          padding-left: 180px;
          p {
            color: #999;
            &.goods-extry-name {
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}
.tk_title {
  padding: 20px;
  font-size: 26px;
  font-weight: 400;
  color: #888;
  background: #fff;
  span {
    width: 26%;
    display: inline-flex;
    justify-content: space-around;
  }
}
.tk_message {
  padding: 0 20px;
  font-size: 24px;
  color: #3d4245;
  background-color: #fff;
  section {
    display: block;
    border-bottom: 2px solid #f1f1f1;
    line-height: 40px;
    padding: 20px;
    background-color: #fff;
    &:first-child {
      border-top: 2px solid #f1f1f1;
    }
    span {
      display: block;
      &:nth-child(1) {
        color: #888;
        width: 26%;
        float: left;
        display: inline-flex;
        flex-direction: row;
        justify-content: space-around;
      }
      &:nth-child(2) {
        float: left;
        width: 74%;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
      }
    }
  }
}
.logistics {
  margin-top: 20px;
  background: #fff;
  line-height: 40px;

  .wu_tt {
    height: 100px;
    line-height: 100px;
    font-size: 28px;
    padding: 0px 40px;
    border-bottom: 2px solid #dedede;
  }
  .wuliu {
    height: auto;
    background: none;
    padding: 0;
    overflow: hidden;
    position: relative;
    .wu_left {
      width: 14px;
      height: auto;
      position: absolute;
      left: 10px;
      top: 26px;
      .boll {
        width: 14px;
        height: 14px;
        border-radius: 8px;
        background-color: #b5b5b5;
      }
      // &.first {
      //   top: 0;
      //   .fff {
      //     width: 14px;
      //     height: 28px;
      //     background-color: #fff;
      //   }
      //   .boll {
      //     background: #ff5c00;
      //   }
      // }
    }
    .wlt {
      border-bottom: 0;
      padding: 0;
      text-align: left;
      border-left: 2px dashed #d7d7d7;
      margin-left: 16px;
      padding-left: 26px;
      // &.first p {
      //   color: #ff5c00;
      // }
      p {
        color: #666;
        &:first-child {
          padding-top: 12px;
        }
        &:last-child {
          padding-bottom: 12px;
        }
      }
    }
  }
}
.cancel_change_btn {
  padding: 30px;
}
</style>